<script setup>

import {onMounted, ref} from "vue";
import store from "@/store";
import router from "@/router";
import {useRoute} from "vue-router";
import {searchOrder, searchOrderById, updateOrder} from "@/api/order";
import {searchMerchants} from "@/api/merchant";
import {findAll} from "@/api/user";
import {open_error, open_success} from "@/utils/common";

// 通用的状态栏
const statusList = ref([
  {
    status: 0,
    name: "未付款"
  },
  {
    status: 1,
    name: "未完成"
  },
  {
    status: 2,
    name: "未送达"
  },
  {
    status: 3,
    name: "未评价"
  },
  {
    status: 4,
    name: "已完成"
  },
  {
    status: 5,
    name: "正在退款"
  },
  {
    status: 6,
    name: "正在退款"
  },
])

const route = useRoute();

const formLabelWidth = "100px";

// 提交的表单
const data = ref({
  id: null,
  number: 0,
  status: 0,
  userId: 0,
  merchantId: 0,
  orderTime: "",
  checkoutTime: "",
  payMethod: 0,
  amount: 0,
  consignee: "",
  phone: "",
  address: "",
  notes: ""
});

const merchants = ref([]);

const users = ref([]);

const before = ref("");

onMounted(() => {
  before.value = route.params.before;
  data.value.id = route.params.id;
  // 查询id的
  searchOrderById(data.value).then((res) => {
    data.value = res.data;
    console.log(data);
  });
  searchMerchants().then((res) => {
    merchants.value = res.data;
  });
  findAll().then((res) => {
    users.value = res.data;
  })
});

// 提交当前更改
const commit_change = () => {
  data.value.id = route.params.id;
  console.log(data.value);
  updateOrder(data.value).then((res) => {
    if(res.state === 0){
      open_success("成功更新")
    } else {
      open_error(res.message);
    }
    console.log(res);
    router.push("/orders");
  });
}

const cancel_change = () => {
  router.push("/orders");
}

</script>

<template>
  <el-card class="account-container">
    <h1 :style="`font-size: var(--el-font-size-extra-large)`" style="font-size: 26px; color: #615f5f">订单详情</h1>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">主页</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a href="/message">待处理消息</a></el-breadcrumb-item
      >
      <el-breadcrumb-item
      ><a href="/orders">订单列表</a></el-breadcrumb-item
      >
      <el-breadcrumb-item>订单的详情页</el-breadcrumb-item>
    </el-breadcrumb>
    <br>
    <el-form :model="data">
      <el-form-item label="订单编号" :label-width="formLabelWidth">
        <el-input v-model="data.number" autocomplete="off" :disabled="true" />
      </el-form-item>
      <el-form-item label="订单状态" :label-width="formLabelWidth">
        <el-select v-model="data.status" clearable placeholder="Select">
          <el-option
              v-for="item in statusList"
              :key="item.status"
              :label="item.name"
              :value="item.status"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="总金额" :label-width="formLabelWidth">
        <el-input v-model="data.amount" autocomplete="off" />
      </el-form-item>
      <el-form-item label="卖家店名" :label-width="formLabelWidth">
        <el-select v-model="data.merchantId" clearable placeholder="Select">
          <el-option
              v-for="item in merchants"
              :key="item.id"
              :label="item.shopName"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="买家姓名" :label-width="formLabelWidth">
        <el-select v-model="data.userId" clearable placeholder="Select">
          <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.username"
              :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="收货人姓名" :label-width="formLabelWidth">
        <el-input v-model="data.consignee" autocomplete="off" />
      </el-form-item>
      <!--      下面三个之后做成选择的格式  -->
      <el-form-item label="收货人电话" :label-width="formLabelWidth">
        <el-input v-model="data.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="formLabelWidth">
        <el-input v-model="data.address" autocomplete="off" />
      </el-form-item>
      <el-form-item label="买家注释" :label-width="formLabelWidth">
        <el-input v-model="data.notes" autocomplete="off" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-button type="primary" plain @click="commit_change">提交修改</el-button>
        <el-button type="warning" plain @click="cancel_change">取消修改</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>